<template>
	<div class="isMask">
		<div class="isMask_mask" @click="cencleClick"></div>
		<div class="isMask_Content">
			<div class="isMask_Content_Header">
				<text class="isMask_Content_Header_Title">{{ selectTitle }}</text>
				<icon content="md-close-circle" class="isMask_Content_Header_Icon" @click="cencleClick"></icon>
			</div>
			<list>
				<cell>
					<div class="shop_box" v-for="(item, index) in select" @click="chooseClick(index, item)">
						<div>
							<text class="shop_name">{{ item.name }}</text>
						</div>
						<!-- <div :class="[item[params] == selectValue ? 'isMask_Content_Content_IconBox' : 'isMask_Content_Content_No_IconBox']">
							<icon content="md-checkmark" class="isMask_Content_Content_Icon"></icon>
						</div> -->
						<div v-if="item[params] == selectValue" class="isMask_Content_Content_IconBox">
							<icon content="md-checkmark" class="isMask_Content_Content_Icon"></icon>
						</div>
						<div v-else class="isMask_Content_Content_No_IconBox"></div>
					</div>
				</cell>
			</list>
			<div class="isMask_Botton">
				<div class="isMask_Botton_Box botton_Bg_Color" @click="completeClick"><text class="isMask_Botton_Title botton_Fz_Color">完成</text></div>
			</div>
		</div>
	</div>
</template>

<script>
import request from '@/utils/request';
import { list } from '@/api/sysEmployee.js';
export default {
	data() {
		return {
			select: [],
			form: {}
		};
	},
	props: ['selectValue', 'selectTitle', 'params', 'requests', 'LocalData', 'selectData'],
	created() {
		this.loadList();
	},
	mounted() {},
	methods: {
		loadList() {
			if (this.LocalData) {
				this.select = this.selectData
			} else {
				request({
					url: `/admin/${this.requests}/list`,
					method: 'get'
				}).then(res => {
					this.select = res.data.data;
					/* if (this.params == 'vip') {
						const item = {
							'vip': 0,
							'name': 'vip0'
						}
						this.select.push(item)
					} */
					this.select.forEach(item => {
						if (item[this.params] == this.selectValue) {
							this.form = item
						}
					})
				});
			}
		},
		chooseClick(index, item) {
			this.selectValue = item[this.params];
			this.form = item;
		},
		completeClick() {
			let form = {
				form: this.form,
				params: this.params
			}
			this.$emit('completesEelect', form);
		},
		cencleClick() {
			this.$emit('cencleSelect');
		}
	}
};
</script>
<style lang="css" src="../../../../../style/wx.css" />
<style scoped>
.isMask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.3);
	z-index: 999;
}
.isMask_mask {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.3);
}
.isMask_Content {
	width: 750px;
	height: 800px;
	background-color: white;
	position: fixed;
	bottom: 0;
	padding: 20px;
	box-sizing: border-box;
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
}

.isMask_Content_Header {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	position: relative;
	margin-bottom: 50px;
}

.isMask_Content_Header_Title {
	font-size: 30px;
}

.isMask_Content_Header_Icon {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 50px;
	height: 35px;
}

.isMask_Content_Content {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding-top: 16px;
	padding-bottom: 16px;
}

.isMask_Content_Content_Title {
	font-size: 24px;
}

.isMask_Content_Content_IconBox {
	width: 30px;
	height: 30px;
	border-radius: 50px;
	/* background-image: linear-gradient(to bottom, rgba(233, 88, 79, 1), rgba(241, 114, 80, 1)); */
	background-color: rgba(233, 88, 79, 1);
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.isMask_Content_Content_No_IconBox {
	width: 30px;
	height: 30px;
	border-radius: 50px;
	border-width: 1px;
	border-style: solid;
	border-color: rgba(0, 0, 0, 0.3);
}

.isMask_Botton {
	width: 750px;
	position: absolute;
	bottom: 30px;
	left: 0;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.isMask_Botton_Box {
	width: 690px;
	height: 80px;
	border-radius: 40px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.isMask_Botton_Title {
	font-size: 30px;
	/* color: white; */
}

.isMask_Content_Content_Icon {
	width: 30px;
	height: 30px;
	color: white;
	font-size: 24px;
}
.shop_box {
	padding-top: 20px;
	padding-bottom: 20px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: rgba(0, 0, 0, 0.2);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}
.shop_name {
	font-size: 32px;
}
</style>
